<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付订单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/css/wechat/pay.css">
</head>
<body>
<div class="ontouchstart">
    <div class="bd">
        <div class="page__bd">
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">车牌：</label>
                    </div>
                    <div class="weui-cell__ft" th:text="${carNo}"></div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            小区名称：
                        </label>
                    </div>
                    <div class="weui-cell__ft" th:text="${communityName}"></div>
                    <input type="hidden" th:value="${endTime}">
                    <input type="hidden" id="carId" th:value="${carId}">
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            购买月份：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        <div class="weui-count">
                            <a class="weui-count__btn weui-count__decrease"></a>
                            <input disabled="true" class="weui-count__number" type="number" value="1">
                            <a class="weui-count__btn weui-count__increase"></a>
                        </div>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            开始：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        <input disabled="true" class="weui-input" id="start-day" type="text" th:value="${endTime}"/>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            结束：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        <input disabled="true" class="weui-input" id="end-day" type="text" value/>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            月卡价格：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        ￥<span id="money-per-month" th:text="${amt}"></span>/月
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <label class="weui-label">
                            支付方式：
                        </label>
                    </div>
                    <div class="weui-cell__ft">
                        <img th:src="@{/img/wechat/wechat-pay.png}" alt="">
                        微信支付
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pay-footer">
        <div class="pay-line">
            <div class="pay-label">付款金额：</div>
        </div>
        <div class="total-pay">
            ￥<span id="total-money" class="pay-money"></span>
        </div>
    </div>
    <button class="form-btn">立即支付</button>
</div>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>

    //把字符串日期转为日期
    function ConvertStrToDate(datetimeStr) {
        var mydateint = Date.parse(datetimeStr);//数值格式的时间
        if (!isNaN(mydateint)) {
            var mydate = new Date(mydateint);
            return mydate;
        }
        var mydate = new Date(datetimeStr);//字符串格式时间
        var monthstr = mydate.getMonth() + 1;
        if (!isNaN(monthstr)) {//转化成功
            return mydate;
        }//字符串格式时间转化失败
        var dateParts = datetimeStr.split(" ");
        var dateToday = new Date();
        var year = dateToday.getFullYear();
        var month = dateToday.getMonth();
        var day = dateToday.getDate();
        if (dateParts.length >= 1) {
            var dataPart = dateParts[0].split("-");//yyyy-mm-dd  格式时间
            if (dataPart.length == 1) {
                dataPart = dateParts[0].split("/");//yyyy/mm/dd格式时间
            }
            if (dataPart.length == 3) {
                year = Math.floor(dataPart[0]);
                month = Math.floor(dataPart[1]) - 1;
                day = Math.floor(dataPart[2]);
            }
        }
        if (dateParts.length == 2) {//hh:mm:ss格式时间
            var timePart = dateParts[1].split(":");//hh:mm:ss格式时间
            if (timePart.length == 3) {
                var hour = Math.floor(timePart[0]);
                var minute = Math.floor(timePart[1]);
                var second = Math.floor(timePart[2]);
                return new Date(year, month, day, hour, minute, second);
            }
        }
        else {
            return new Date(year, month, day);
        }
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }
</script>
<script>
    $(function () {
        $("#start-day").calendar();

        var number = parseInt($('.weui-count__number').val() || "0");

        setTotalMoney(number);

        var MAX = 99, MIN = 1;

        $('.weui-count__decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number);
            setTotalMoney(number)
        });
        $('.weui-count__increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number);
            setTotalMoney(number)
        });

        function setTotalMoney(number) {
            var moneyPerMonth = parseFloat($('#money-per-month').text());
            var totalMoney = moneyPerMonth * number;
            $("#total-money").text(totalMoney);
            //
            // $("#end-day").calendar({
            //     value: ['2016-12-12'],
            //     dateFormat: 'yyyy年mm月dd日'  // 自定义格式的时候，不能通过 input 的value属性赋值 '2016年12月12日' 来定义初始值，这样会导致无法解析初始值而报错。只能通过js中设置 value 的形式来赋值，并且需要按标准形式赋值（yyyy-mm-dd 或者时间戳)
            // });
            var $startDay = $("#start-day").val();
            $startDay = ConvertStrToDate($startDay);
            $startDay.setMonth($startDay.getMonth() + number);
            $startDay = $startDay.format('yyyy-MM-dd');

            console.log($startDay);
            $("#end-day").val($startDay);
        }

        $('.form-btn').click(function (e) {
            var totalMoney = parseFloat($("#total-money").text());
            if (!totalMoney) {
                return;
            }
            placeOrder();
        });

        //下单
        function placeOrder() {
            var number = parseInt($('.weui-count__number').val() || "0");

            $.ajax({
                type: 'POST',
                data: {
                    "nums": number,
                    "carId": $("#carId").val()
                },
                url: "/mobile/orderIndex/placeOrder",
                success: function (json) {
                    if (json.code == 0) {
                        pay(json.data.appId, json.data.timeStamp, json.data.signType, json.data.nonceStr, json.data.package, json.data.sign)
                    } else {
                        $.toast(json.msg, 'cancel')
                    }
                }
            });
        }

        var timing = 60;

        var time;

        function timeFun() {
            clearInterval(time);
            time = setInterval(function () {
                timing--;
                if (timing < 1) {
                    clearInterval(time);
                    timing = 60
                }
            }, 1000)
        }

        function pay(appId, timeStamp, signType, nonceStr, packages, paySign) {

            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady(appId, timeStamp, signType, nonceStr, packages, paySign);
            }

        }

        //h5唤起微信支付
        function onBridgeReady(appId, timeStamp, signType, nonceStr, packages, paySign) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": appId,
                    "timeStamp": timeStamp,
                    "nonceStr": nonceStr,
                    "package": packages,
                    "signType": signType,
                    "paySign": paySign
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        $.toast("支付成功");
                        timeFun();
                    } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                        $.toast("取消支付", "cancel");
                    }
                }
            );
        }
    });


</script>
</body>
</html>